<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
		<title>1-首页_tab_PxCook</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
    	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="dist/css/sm.css" />
		<link rel="stylesheet" href="dist/css/sm-extend.css" />
		<!--以上是引用SUI框架css文件代码-->
		<link rel="stylesheet" href="css/xh-lxx-header-bar3.css" />
		<link rel="stylesheet" href="css/xh-lxx-autoplay.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-nav1.css"/>
		<link rel="stylesheet" href="css/xh-lxx-tab-title4.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content7.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-title3.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content8.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content9.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-content10.css" />
		<link rel="stylesheet" href="css/xh-lxx-tab-items-icon.css" />
		
		<link rel="stylesheet" href="css/1-首页_tab_PxCook.css" />
		
		
	</head>
	<body>
		<div class="page-group">
	        <div class="page page-current">
	        <!-- html代码 ---------Begin -->
	        	<!--标题栏Begin-->
	        	<header class="bar bar-nav">
					<a class="icon pull-left"><img src="img/left.png" alt=""/></a>
				  	<a class="icon pull-right"><img src="img/right.png" alt="" /></a>
				  	<h1 class="title">
				  		<div class="searchbar">
						    <div class="search-input">
						      <label class="icon icon-search" for="search"></label>
						      <input type="search" id='search' placeholder='请输入检索关键字'/>
						    </div>
						</div>
				  	</h1>
				</header>
				<!--标题栏 End-->
	        	<div class="content">
				    <!-- Swiper Begin-->
				    <div class="swiper-container1">
				        <div class="swiper-wrapper">
				            <div class="swiper-slide1">
				            	<img src="img/59530a31N1a765f92.jpg" alt="" />
				            </div>
				            <div class="swiper-slide1">
				            	<img src="img/5965df18Nee9fd7b6.jpg" alt="" />
				            </div>
				            <div class="swiper-slide1">
				            	<img src="img/59662e5bNa454c17d.jpg" alt="" />
				            </div>
				            <div class="swiper-slide1">
				            	<img src="img/5965df18Nee9fd7b6.jpg" alt="" />
				            </div>
				            <div class="swiper-slide1">
				            	<img src="img/59662e5bNa454c17d.jpg" alt="" />
				            </div>
				        </div>
				        <!-- Add Pagination -->
				        <div class="swiper-pagination"></div>
				    </div>
				    <!--Swiper End-->
				    <!--首页导航栏 Begin-->
		        	<nav class="xh-lxx-tab-nav1">
		        		<a href="#">
		        			<span class="img">
		        				<img src="img/591d9424N068a7ad0.png" alt="" />
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        		<a href="#">
		        			<span class="img">
		        				
		        			</span>
		        			<span class="msg">商品栏目</span>
		        		</a>
		        	</nav>
		        	<!--首页导航栏 End-->
		        	<!--热销头条标题 Begin-->
		        	<div class="xh-lxx-tab-title4">
		        		<h2>热销头条</h2>
		        		<span class="space-line"></span> 
						<span> 想让自己变得耐看?</span>
		        	</div>
		        	<!--热销头条内容 Begin -->
		        	<div class="xh-lxx-tab-content7 margin-top-bottom">
		        		<div class="left">
		        			<h3>商品文案</h3>
		        			<p>商品栏目文案简介内容换行</p>
		        			<div class="time">
		        				<span>00</span> : <span>00</span> : <span>00</span>
		        			</div>
		        			<div class="img">
		        				<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			</div>
		        		</div>
		        		<div class="right">
		        			<div class="content1 border-bottom">
		        				<div class="msg">
		        					<h3>商品文案</h3>
		        					<p>商品栏目文案简介内容换行</p>
		        				</div>
		        				<div class="img">
		        					<img src="img/58105de0N88f8372b.jpg" alt="" />
		        				</div>
		        			</div>
		        			<div class="content1">
		        				<div class="msg">
		        					<h3>商品文案</h3>
		        					<p>商品栏目文案简介内容换行</p>
		        				</div>
		        				<div class="img">
		        					<img src="img/58105de0N88f8372b.jpg" alt="" />
		        				</div>
		        			</div>
		        		</div>
		        	</div>
		       		 <!--热销头条内容 End -->
		        	<!--精选商品标题 -->
		        	<div class="xh-lxx-tab-title3">
	        			<span class="icon icon-picture"></span>
	        			<span class="title3">精选商品</span>
		        	</div>
			        <!--精选商品内容1 Begin -->
		        	<div class="xh-lxx-tab-content8 border-top">
	        			<div class="content1 border-right">
	        				<div class="msg">
	        					<h3>商品文案</h3>
	        					<p>文案简介内容</p>
	        					<span>HOT</span>
	        				</div>
	        				<div class="img">
	        					<img src="img/58105de0N88f8372b.jpg" alt="" />
	        				</div>
	        			</div>
	        			<div class="content1">
	        				<div class="msg">
	        					<h3>商品文案</h3>
	        					<p>文案简介内容</p>
	        					<span>HOT</span>
	        				</div>
	        				<div class="img">
	        					<img src="img/58105de0N88f8372b.jpg" alt="" />
	        				</div>
	        			</div>
		        	</div>
		       		 <!--精选商品内容1 End -->
		        	<!--精选商品内容2 Begin -->
		        	<div class="xh-lxx-tab-content9 border-bottom margin-bottom">
		        		<div class="content1">
		        			<h3>商品文案</h3>
		        			<p>文案简介内容</p>
		        			<div class="img">
		        				<img src="img/593ff956N69c3d9c8.jpg!q70.jpg" alt="" />
		        			</div>
		        		</div>
		        		<div class="content1">
		        			<h3>商品文案</h3>
		        			<p>文案简介内容</p>
		        			<div class="img">
		        				<img src="img/593ff956N69c3d9c8.jpg!q70.jpg" alt="" />
		        			</div>
		        		</div>
		        		<div class="content1">
		        			<h3>商品文案</h3>
		        			<p>文案简介内容</p>
		        			<div class="img">
		        				<img src="img/593ff956N69c3d9c8.jpg!q70.jpg" alt="" />
		        			</div>
		        		</div>
		        		<div class="content1">
		        			<h3>商品文案</h3>
		        			<p>文案简介内容</p>
		        			<div class="img">
		        				<img src="img/593ff956N69c3d9c8.jpg!q70.jpg" alt="" />
		        			</div>
		        		</div>
		        	</div>
		       		 <!--精选商品内容2 End -->
		        	<!--猜你喜欢标题 -->
		        	<div class="xh-lxx-tab-title3">
	        			<span class="icon icon-picture"></span>
	        			<span class="title3">猜你喜欢</span>
		        	</div>
		        	<!--猜你喜欢 内容-->
		        	<div class="xh-lxx-tab-content10 margin-footer">
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		<!--商品内容1-->
		        		<div class="content10">
		        			<img src="img/58105de0N88f8372b.jpg" alt="" />
		        			<h3><span>精选</span>商品栏目文案内容简介内容可显示两行</h3>
		        			<div class="price-count">
		        				<div class="price">
		        					<span class="yen">￥</span>
		        					<span>8.80</span>
		        				</div>
		        				<div class="count">
		        					<span>88888人付款</span>
		        					<div class="more">
		        						<span></span>
		        						<span></span>
		        						<span></span>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        		
		        	</div>
		        	
			    </div>
				<nav class="bar bar-tab xh-lxx-tab-items-icon">
				  <a class="tab-item external active" href="#">
				    <span class="icon icon-home"></span>
				    <span class="tab-label">首页</span>
				  </a>
				  <a class="tab-item external" href="#">
				    <span class="icon icon-menu"></span>
				    <span class="tab-label">分类</span>
				  </a>
				  <a class="tab-item external" href="#">
				    <span class="icon icon-search"></span>
				    <span class="tab-label">发现</span>
				  </a>
				  <a class="tab-item external" href="#">
				    <span class="icon icon-cart"></span>
				    <span class="tab-label">购物车</span>
				  </a>
				  <a class="tab-item external" href="#">
				    <span class="icon icon-me"></span>
				    <span class="tab-label">我的</span>
				    <span class="badge">2</span>
				  </a>
				</nav>
			


	        <!-- html代码 End -->
	        </div>
   		</div>
	
		<!--以下是引用SUI框架js文件代码-->
		<script src='dist/js/zepto.min.js'></script>
	    <script src="dist/js/sm.js"></script>
	    <script src="dist/js/sm-extend.min.js"></script>
	    <script src="js/swiper.js"></script>
	    <script src="js/index.js"></script>
		<script>
			$.init(); //初始化
	    </script>
	</body>
</html>

	        